<template>

  <view>
    <view v-for="d in list" class="notice">

      <view class="title" @click="showDetail(d.bid)">
        {{d.title}}
      </view>

      <view class="info">
        {{d.username}} {{ tools.formatDate(d.lastupdate) }}
      </view>




    </view>

    <view class="">
      <uni-load-more @clickLoadMore="loadmore" :status="status"></uni-load-more>
    </view>

  </view>

</template>

<script setup>
  import {
    onPullDownRefresh,
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app'

  onLoad(() => {
    console.log('页面加载完成...')
    uni.startPullDownRefresh()
  })

  onReachBottom(() => {
    console.log('页面触底加载...')
    loadmore()
  })

  onPullDownRefresh(() => {
    console.log("触发下拉刷新中...")

    queryInfo.value = {
      title: '',
      content: '',
      username: ''
    }

    page.value = {
      pageNumber: 1,
      pageSize: 2
    }

    query()

  })

  import {
    ref
  } from 'vue'
  import {
    api,
    tools
  } from '../../js/api.js'

  const status = ref('more')

  const queryInfo = ref({
    title: '',
    content: '',
    username: ''
  })

  const page = ref({
    pageNumber: 1,
    pageSize: 2
  })

  const list = ref([])

  const showDetail = (bid) => {
    uni.navigateTo({
      url: '/pages/notice/detail?bid=' + bid
    })
  }

  const query = () => {
    api.get(
      '/crud/billboard',
      tools.concatJson(queryInfo.value, page.value),
      (data) => {
        if (data.success) {
          page.value = data.data.pageBean
          list.value = data.data.data
          uni.stopPullDownRefresh()
          console.log('查询完成')
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'fail'
        })

        uni.stopPullDownRefresh()
        console.log('查询完成')
      }
    )
  }


  const loadmore = () => {
    if (page.value.pageNumber >= page.value.pageCount) {
      status.value = 'noMore'
      return
    }
    page.value.pageNumber = page.value.pageNumber + 1
    status.value = 'loading'
    api.get(
      '/crud/billboard',
      tools.concatJson(queryInfo.value, page.value),
      (data) => {
        status.value =
          page.value.pageNumber >= page.value.pageCount ?
          'noMore' : 'more'
        if (data.success) {
          page.value = data.data.pageBean
          list.value = list.value.concat(data.data.data)
          return
        }
        uni.showToast({
          title: data.message,
          icon: 'fail'
        })
      }
    )
  }
</script>

<style>
  .notice {
    border: 1px solid #dcdcdc;
    margin: 1rem;
    border-radius: 5px;
  }

  .notice .title {
    font-size: 1.2rem;
    padding: 5px;
    font-weight: bold;
  }

  .notice .info {
    text-align: right;
  }
</style>